<template>
	<view class="record">
		<view class="record-1">
			<image class="Img" src="https://xb-street.oss-cn-shanghai.aliyuncs.com/xb-doctor-manage/static/images/gjpzhhr@2x.png" mode="" @tap="openapplicat"></image>
		</view>
		<view class="inviterecode box d-ai-c d-jc-c">
			<view class="left">
				<view class="">
					{{inviterecode[0].friend==undefined?'0':inviterecode[0].friend}}人
				</view>
				<view class="">
					已邀请好友
				</view>
			</view>
			<view class="left">
				<view class="">
					{{inviterecode[0].sumBonus==undefined?'0':inviterecode[0].sumBonus}}元
				</view>
				<view class="">
					推荐奖励
				</view>
			</view>
		</view>
		<view class="title box d-ai-c d-jc-sb">
			<view class="">
				我的好友
			</view>
			<view class="">
				完成服务(单)
			</view>
			<view class="">
				推荐奖励(元)
			</view>
		</view>
		<view v-if="inviterecode.length!=0" class="invitelist box d-ai-c d-jc-sb" v-for="(item,index) in inviterecode">
			<view class="left">
				<view class="">
					{{item.phone}}
				</view>
				<view class="">
					{{item.createTime | dateFormatYear1}}注册
				</view>
			</view>
			<view class="center">
				{{item.count}}
			</view>
			<view class="right">
				{{item.bonus}}
			</view>
		</view>
		<view class="isNull" v-if="inviterecode.length==0">
			<image class="null_img" src="../../static/wujilu@2x.png" mode=""></image>
			<view class="null">
				暂无邀请记录
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				inviterecode:''
			}
		},
		computed: mapState(['loginState', 'userInfo']),
		onShow() {
			this.getUserInfo()
			this.getrecommendedrecord()
		},
		methods: {
			openapplicat(){
				uni.navigateTo({
					url:'application'
				})
			},
			...mapMutations(['login', 'logout','setUserInfo']),
			// 获取用户信息
			getUserInfo() {
				this.$api.getUserInfo().then((res) => {
					let userInfo = res.data.dataMap
					// this.getUserIn = res.data.dataMap
					console.log(userInfo)
					if (userInfo != null) {
						this.setUserInfo(userInfo)
					}
			
				})
			
			},
			getrecommendedrecord(){
				this.$api.vitedtorecord({
					accompanyId:this.userInfo.userInfo.userAccompanyInfo.accompanyId
				}).then((res) => {
					if (res.data.code == 200) {
						console.log(res.data.dataMap.list)
							this.inviterecode = res.data.dataMap.list
						
					}
				})
			},
		}
	}
</script>

<style scoped lang="less">
	.isNull{
		text-align: center;
		.null{
			color: #999999;
			font-size: 28rpx;
			text-align: center;
			margin-top: 50rpx;
		}
		.null_img{
			width: 420rpx;
			height: 272rpx;
		}
	}
	.record{
		overflow: hidden;
		.record-1{
			width: 690rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			.Img{
				width: 690rpx;
				height: 240rpx;
			}
		}
		.inviterecode{
			width: 690rpx;
			height: 150rpx;
			background: linear-gradient(89deg, #FAB650 0%, #FFD166 100%);
			border-radius: 12rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			.left{
				width: 50%;
				text-align: center;
				view:nth-child(1){
					font-size: 40rpx;
					font-weight: bold;
					color: #512B0A;
				}
				view:nth-child(2){
					font-size: 28rpx;
					font-weight: 500;
					color: #512B0A;
				}
			}
		}
	    .title{
			width: 690rpx;
			padding: 30rpx;
			view{
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
			}
		}
		.invitelist{
			width: 690rpx;
			padding: 0rpx;
			margin: 0 auto;
			margin-bottom: 20rpx;
			.left{
				width: 33%;
				view:nth-child(1){
					font-size: 32rpx;
					font-weight: 500;
					color: #333333;
				}
				view:nth-child(2){
					font-size: 26rpx;
					font-weight: 500;
					color: #999999;
				}
			}
			.center{
				width: 33%;
				text-align: center;
			}
			.right{
				width: 33%;
				text-align: center;
			}
		}
		
	}

</style>
